import React, { useEffect, useState } from "react";
import { Icon } from 'antd';
import style from "./index.module.less";
import ewm from "../../style/imgs/homePage/ewm.png";

const RightTools = () => {
  let [scrollTop, setScrollTop] = useState(0);
  let [isInfor, setIsInfor] = useState(false);
  // 浏览器滚动事件
  function handleScroll(e: any) {
    setScrollTop(e.target.documentElement.scrollTop);
  }

  useEffect(() => {
    console.log("进来初始化");
    window.addEventListener("scroll", (e) => handleScroll(e));
  }, []);

  function handleToTop() {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth' // 可选，平滑滚动效果
    });
  }

  function handleContactOver() {
    setIsInfor(true);
  }

  function handleContactOut() {
    setIsInfor(false);
  }

  return <div>
    <div className={style.tools_body}>
      {isInfor && <div className={style.information}>
        <div className={style.infor_item}>
          <div className={style.infor_title}>联系电话</div>
          <div className={style.infor_content}>131-2108-1606</div>
        </div>
        <div className={style.infor_item}>
          <div className={style.infor_title}>公司邮箱</div>
          <div className={style.infor_content}>wfhyedit@163.com</div>
        </div>
        <div className={style.infor_item}>
          <div className={style.infor_title}>微信咨询</div>
          <img src={ewm} alt="图片加载失败" />
        </div>
      </div>}
      <div className={style.empty_div} onMouseOver={handleContactOver} onMouseOut={handleContactOut} />
      <div className={`${style.contact}`}>
        <Icon type="message" />
        <span className={style.title}>联系我们</span>
      </div>
      {scrollTop > 500 && <div className={style.scroll_body} onClick={handleToTop}>
        <Icon type="vertical-left" />
        <span className={style.title}>返回顶部</span>
      </div>}
    </div>
  </div>
}

export default RightTools;